<template>
  <div>
    <el-dialog title="修改数据字典" :visible.sync="isShow" width="800px" :close-on-click-modal="false" @close="closeUserMod"
      @open="openUpdate">
      <div v-loading="loading">
        <el-card>
          <el-form size="mini" ref="newUserDate" :model="newUserDate" :rules="rules" label-width="140px"
            label-position="left">
             <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="DataKeyVal" label="键值">
                  <el-input v-model="newUserDate.DataKeyVal" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="Meaning" label="意义">
                  <el-input v-model="newUserDate.Meaning" ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="12">
                  <el-form-item prop="Wher" label="是否可维护">
                    <!-- 下拉 -->
                    <el-select v-model="newUserDate.Wher"   filterable  placeholder="请选择业务状态"  >
                    <el-option
                    v-for="item in PreserveFlag"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div style="text-align:right;margin:20px 0">
          <el-button size="mini" @click="cancleUserMod">取消</el-button>
          <el-button type="primary" @click="confirm" size="mini">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import request from "@/common/utils/request";
  import update from "@/message/basicmanagement/datadictionary/data-dictionary-update";
  
  export default {
    name: "",
    data() {
      return {
      PreserveFlag: [
         {name:'Y-是',value:'Y'},
         {name:'N-否',value:'N'},
      ],
          loading: false,
          newUserDate:{//表单信息
          Meaning:"",
          DataKeyVal:"",
          Wher:""

          },
            rules: { //表单校验规则
                 Meaning: [
          {
            required: true,
            message: "键值意义必填",
            trigger: "change"
          }
        ],
             Wher: [
          {
            required: true,
            message: "是否可维护不能为空",
            trigger: "change"
          }
        ],
            }
      };
    },
    props: { //父元素传递的数据
      optionUpdate: Object
    },
    computed: {
      isShow: { //修改用户弹窗是否显示
        get: function () {
          return this.optionUpdate.isShow;
        },
        set: function (newValue) {
          this.optionUpdate.isShow = newValue;
        }
      },
    },
    methods: {
      openUpdate() { //打开弹窗事件
      console.log(this.optionUpdate.currentRow)
       this.newUserDate.DataKeyVal = this.optionUpdate.currentRow[0].DataKeyVal;
       this.newUserDate.Meaning = this.optionUpdate.currentRow[0].Meaning;
       this.newUserDate.Wher = this.optionUpdate.currentRow[0].PreserveFlag;
      },
      cancleUserMod() { //关闭弹窗事件，清楚表单验证
        this.optionUpdate.isShow = false;
        this.$refs.newUserDate.clearValidate();
      },
      closeUserMod() { //修改弹窗关闭
        this.$refs.newUserDate.clearValidate();
      },
      confirm() { //修改
        this.$refs["newUserDate"].validate(valid => {
          if (valid) {
            let resBody = new update();
             resBody.data.DataKeyVal =this.newUserDate.DataKeyVal;
             resBody.data.Meaning =this.newUserDate.Meaning;
             resBody.data.PreserveFlag = this.newUserDate.Wher;
              resBody.data.DictID = this.optionUpdate.currentRow[0].DictID;
              resBody.data.DataKey = this.optionUpdate.currentRow[0].DataKey;
             request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                  this.optionUpdate.isShow = false;
                  this.$emit("refreshTable"); //修改用户成功并刷新表格数据
                } else {
                  this.loading = false;
                }
              })
              .catch(error => {
                this.loading = false;
              });
          } else {
            this.$message({
              type: "warning",
              message: "请输入合法的数据！"
            });
            return false;
          }

        });
      }
    }
  };

</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-dialog__body {
    padding: 20px;
    padding-top: 10px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
